<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>权限管理系统 - BY xuetang9</title>
    
    <!-- JQuery DataTable Css -->
    <link href="${pageContext.request.contextPath }/static/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">
    
	<%@ include file="../layout/styles.jsp" %>
	
</head>

<body class="theme-red">
    
    <%@ include file="../layout/tools.jsp" %>
    
    <!-- Top Bar -->
    <%@ include file="../layout/top.jsp" %>
    <!-- #Top Bar -->
    
    <section>
        <!-- Left Sidebar -->
        <%@ include file="../layout/leftsidebar.jsp" %>
        <!-- #END# Left Sidebar -->
        
        <!-- Right Sidebar -->
        <%@ include file="../layout/rightsidebar.jsp" %>
        <!-- #END# Right Sidebar -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="block-header">
                <h2>仪表盘</h2>
            </div>
            
            <!-- 表格内容 -->
            <div class="row clearfix">
            
            	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            		<div class="card">
            			<div class="header">
                            <h2>
                                EXPORTABLE TABLE
                            </h2>
                            <ul class="header-dropdown m-r--5">
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">more_vert</i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="javascript:void(0);" data-toggle="new"><i class="fa fa-plus fa-fw"></i> 新增</a></li>
                                        <li><a href="javascript:void(0);">Another action</a></li>
                                        <li><a href="javascript:void(0);">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                         <div class="body">
                         	<div class="table-responsive">
                         		<table class="table table-bordered table-hover">
                
                         		</table>
                         	
                         	</div>
                         </div>
            		</div>
            	</div>
            </div>
       
        </div>
    </section>

    <%@ include file="../layout/scripts.jsp" %>
    
    <script src="${pageContext.request.contextPath }/static/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="${pageContext.request.contextPath }/static/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    
    <script>
    	$(function(){
    		
    	    $('.table').DataTable({
    	        responsive: true,
    	        paging: true, // 是否启用分页
    	        lengthMenu: [2,3,5,10,20,30,45,60],// 分页的选择项
    	        columnDefs:[{
    	        	targets: 4,
    	        	render: function(cellValue, type, rowData, opts){
    	        		console.log(rowData);
    	        		if(cellValue == 1){
    	        			return rowData.pid == 0 ? '菜单' : '子菜单';
    	        		}else if(cellValue == 2){
    	        			return '功能'
    	        		}
    	        	}
    	        }],
    	        columns:[
    	        	{data: 'id', title: '编号'},
    	        	{data: 'name', title: '名称'},
    	        	{data: 'icon', title: '图标'},
    	        	{data: 'url', title: 'URL'},
    	        	{data: 'type', title: '类型'},
    	        	{data: 'pid', title: '父资源编号'},
    	        	{data: 'sort', title: '排序编号'},
    	        	{data: 'description', title: '描述'},
    	        ],
    	     
    	        processing: true,
    	        serverSide: true,
    	        ajax: {
    	        	url: '${pageContext.request.contextPath }/system/resource.json',
    	        	type: 'post',
    	        	contentType: 'application/json;charset=UTF-8',
    	        	data: function(data){
    	        		/*var jsonString = JSON.stringify(data);
    	        		console.log(jsonString);*/
    	        		return JSON.stringify(data);
    	        	}
    	        },
    	        language:{
    	        	lengthMenu: '显示 _MENU_ 条数据',
    	        	search: '搜索',
    	        	//info: '当前显示0-10条数据,共100条数据',
    	        	 "info":           "显示 _START_ 到 _END_ 条数据, 共 _TOTAL_ 条数据",
    	        	 "infoEmpty":      "显示 0 到 0 条数据 ,共0条数据",
    	        	 "infoFiltered":   "(filtered from _MAX_ total entries)",
    	        	 "infoPostFix":    "",
    	        	paginate: {
    	        		"first":      "首页",
						"last":       "尾页",
						"next":       "下一页",
						"previous":   "上一页" ,
    	        	}
    	        }
    	   		
    	    });
    	    
    	    // 绑定事件---start
    	    
    	    $('a[data-toggle="new"]').on('click',function(){
    	    	
    	    	$.get('/system/resource/new',function(html){
    	    		var dialog = bootbox.dialog({
        	    		title: '<i class="fa fa-sitemap"></i> 新增资源',
        	    		message: html,
        	    		show: false,
        	    		closeButton: false,
        	    		className: 'xxxxxxxxxxxxx',
        	    		buttons:{
        	    			ok:{
        	    				label: '确定',
        	    				className: 'btn-link waves-effect',
        	    				callback: function(){
        	    					// 使用Ajax提交模态框中的表单
        	    					var $form = $(this).find('form');
        	    					$.ajax({
        	    						url: $form[0].action,
        	    						type: 'post',
        	    						dataType: 'json',
        	    						data: $form.serialize(),
        	    						success: function(result){
        	    							if(!result.success){
        	    								alert(result.message);
        	    								return;
        	    							}
        	    							alert('成功');
    	    								dialog.modal('hide');
        	    						},
        	    						error: function(){
        	    							alert('错误');
        	    						}
        	    					});
        	    					
        	    					return false;
        	    				}
        	    			},
        	    			cancel:{
        	    				label: '取消',
        	    				className: 'btn-link'
        	    			}
        	    		}
        	    		
        	    	});
        	    	/* dialog.on('show.bs.modal',function(){
        	    		$(this).find('.modal-content').addClass('modal-col-red');
        	    	}); */
        	    	
        	    	dialog.modal('show');
    	    		
    	    		
    	    		
    	    		
    	    	});
    	    	
    	    	
    	    	
    	    	
    	    	
    	    });
    	    
    	    // 绑定事件---end
    	    
    	    
    	    
    	    
        	
    	});
    
    </script>
</body>

</html>
    